﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits=" HealthSystem.sysAdmin.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../src/jslib/jQuery/jquery-1.3.js" type="text/javascript"></script>
    <script src="../src/jslib/jQuery/jgrowl/jquery.jgrowl.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../src/css/SystemCss.css" type="text/css" />
    <link rel="stylesheet" href="../src/css/ToolbarCss.css" type="text/css" />
    <link rel="stylesheet" href="../src/css/EditPage.css" type="text/css" />
    <link href="../src/css/MapCSS.css" rel="stylesheet" type="text/css" />
    <link href="../src/css/ScrollEdit.css" rel="stylesheet" type="text/css" />
    <script src="../src/js/jquery.GoogleMap.js" type="text/javascript"></script>
    <script charset="utf-8" src="http://ditu.google.cn/maps?file=api&amp;v=3&amp;key&sensor=false&hl=zh-CN" type="text/javascript"></script>
    
    <script type="text/javascript">
        var Map;

        //已有的地标


        //设置起始坐标（默认）
        var latlng = new GLatLng(23.376610727508183, 113.21569919586182);
       

        //地图缩放级别
        var zoomSize = 15;

        //新地标
        var newMarker;

        //新增标志位
        var addFlag = false;

        //定义蓝色Icon样式
        var blueIcon = new GIcon(G_DEFAULT_ICON, "../src/images/gmap_blue.png");
        //绿色样式
        var option_Green = { icon: greenIcon };
        //定义绿色Icon样式
        var greenIcon = new GIcon(G_DEFAULT_ICON, "../src/images/gmap_green.png");

        //默认样式
        var option_Default = { icon: G_DEFAULT_ICON };

        //绿色地标样式
        var option_BlueICON = { icon: greenIcon };

        //拖动样式
        var option_Drag = { icon: blueIcon, draggable: true };



        $(document).ready(function () {
            //加载地图

            var skey = $("[id$=txtskey]").val();
            var stype = $("[id$=txtstype]").val();
            $.getJSON("MapHander.ashx", { saction: "show", skey: skey, stype: stype }, function (resultData) {

                debugger
                if (resultData.x > 0) {
                    latlng = new GLatLng(resultData.x, resultData.y);
                    Map = GoogleMapCreate(document.getElementById("panelMap"), true, true, true, true, zoomSize, latlng);
                    ShowData();
                    $("[id$=txtsLocation]").val('{x:' + resultData.x + ',y:' + resultData.y + '}');
                    var m = $("[id$=txtsLocation]").val();
                }
                else {
                    $.getJSON("MapHander.ashx", { saction: "districtMap", skey: skey, stype: stype }, function (data) {
                        debugger
                        if (data.x > 0) {
                            latlng = new GLatLng(data.x, data.y);
                            zoomSize = 10;
                            Map = GoogleMapCreate(document.getElementById("panelMap"), true, true, true, true, zoomSize, latlng);
                        }
                        else {
                            zoomSize = 7;
                            Map = GoogleMapCreate(document.getElementById("panelMap"), true, true, true, true, zoomSize, latlng);
                        }

                    });
                }
                jQuery('#divLoading').hide();
            });


            //            $.getJSON("MapHander.ashx", { saction: "show", skey: "123" }, function (data) {
            //            
            //            latlng = new GLatLng(data.x, data.y);
            //            Map = GoogleMapCreate(document.getElementById("panelMap"), true, true, true, true, zoomSize, latlng);
            //                $("#btnAdd").trigger("click");
            //                $("[id$=txtsLocation]").val('{x:' + data.x + ',y:' + data.y + '}');
            //                
            //            });


            $('#selArea').change(function () {
                switch ($('#selArea').val()) {
                    case "bj":
                        //北京
                        latlng = new GLatLng(39.919, 116.387);
                        break;
                    case "sh":
                        //上海
                        latlng = new GLatLng(31.233, 121.482);
                        break;
                    case "gz":
                        //广州
                        latlng = new GLatLng(23.132, 113.307);
                        break;
                    case "cq":
                        //重庆
                        latlng = new GLatLng(29.564947, 106.551762);
                        break;
                }

                Map.panTo(latlng);
                Map.setZoom(11);
            });



            //加载地标
            if ($("[id$=txtsLocation]").val() != '') {
                var point = eval('(' + $("[id$=txtsLocation]").val() + ')');
                var Alatlng = new GLatLng(point.x, point.y);

                var Amarker = GoogleMapNewMarker(Map, Alatlng, option_Drag);

                var NLatLng = new GLatLng(point.x + 0.1, point.y - 0.2);
                Map.panTo(NLatLng);
                Map.setZoom(11);
                //地标drag事件
                GEvent.addListener(Amarker, "drag", function () {
                    $("[id$=txtsLocation]").val('{x:' + Amarker.getPoint().lat() + ',y:' + Amarker.getPoint().lng() + '}');

                });
            }

            //-------------给“添加”按钮的click放入事件--------------------
            $('#btnAdd').click(function () {

                //重复标记判断
                var m = $("[id$=txtsLocation]").val();
                if (addFlag || $("[id$=txtsLocation]").val() != '') {
                    alert('你已添加标记！');
                    return;
                }

                //地图增加单击事件
                GoogleMapAddEvent(myMap, "click", function (marker, point) {
                    //创建新标记
                    newMarker = GoogleMapNewMarker(myMap, point, option_Drag);

                    //地标drag事件
                    GEvent.addListener(newMarker, "drag", function () {
                        $("[id$=txtsLocation]").val('{x:' + newMarker.getPoint().lat() + ',y:' + newMarker.getPoint().lng() + '}');

                    });

                    //标记名称
                    areaName = 'test1';

                    if (areaName == null) {
                        GoogleMapRemoveEvent(myMap, "click");
                        return;
                    }

                    var x = GoogleMapPointX(point);
                    var y = GoogleMapPointY(point);

                    $("[id$=txtsLocation]").val('{x:' + x + ',y:' + y + '}');

                    GoogleMapRemoveEvent(myMap, "click");

                    //alert(newMarker);

                    //显示标记信息窗
                    //                    var strhtml = "<B>啊地方经济</B>";
                    //                    GoogleMapShowTipExpand(myMap, point, areaName, strhtml);


                    //地标单击事件
                    //                    GEvent.addListener(newMarker, "click", function() {
                    //                        GoogleMapShowTipExpand(myMap, point, areaName, strhtml);
                    //                    });

                    addFlag = true;

                });

            });
            //-------------给“添加”按钮的click放入事件--------------------

            //-------------给“删除”按钮的click放入事件--------------------
            $('#btnDel').click(function () {

                myMap.clearOverlays();
                //myMap.removeOverlay(newMarker);
                myMap.closeInfoWindow();
                $("[id$=txtsLocation]").val('');
                addFlag = false;
            });
            //-------------给“删除”按钮的click放入事件--------------------

            var Terminals;
            var list = [];
            var i;
            var n = 16;

            //回调函数
            function cb_LoadData(resultData) {
                //alert(resultData.json);

                if (resultData == null || resultData == '') {
                    $('.terminalinfolist .selectform').empty();
                    Map.clearOverlays();
                    $('#divLoading').hide();
                    return;
                }
                list[0] = resultData;
                Terminals = list;

                jQuery('#td_count').text('共 ' + Terminals.length + ' 条记录');

                //alert(Terminals);
                Map.clearOverlays();
                i = 0;

                $('.terminalinfolist .selectform').empty();
                //$('.terminalinfolist .selectform').append("<tr><td>终端MAC</td><td>安装地址</td></tr>");
                //var trHTML = new Array();

                CreateMarker();

                //$('.terminalinfolist .selectform').append(trHTML.join(''));

                //$('#divLoading').hide();
            }


            function ShowData() {

                //$('#divLoading').show();

                //            var sProvinceCode = jQuery('[id$=ddlProvince]').val();
                //            var sCityCode = jQuery('[id$=ddlCity]').val();
                //            var sDistrictCode = jQuery('[id$=ddlDistrict]').val();
                //            var sAreaCode = jQuery('[id$=ddlArea]').val();
                //            var sORGID = jQuery('[id$=ddlOrg]').val();
                //            var sChannelID = jQuery('[id$=ddlChannel]').val();
                //            var sNodeID = jQuery('[id$=ddlNode]').val();
                //            var NetWork = jQuery('[id$=ddlNetWork]').val();
                //            var TerminalState = jQuery('[id$=ddlTerminalState]').val();
                //            var sNetState = jQuery('[id$=ddlNetState]').val();
                //            var scrennState = jQuery('[id$=ddlScreenState]').val();
                //            var fileState = jQuery('[id$=ddlFileState]').val();
                //            var KeyWord = jQuery('[id$=ddlKeyWord]').val();
                //            var sContent = jQuery('[id$=txtContent]').val();



                jQuery('#divLoading').show();
                var skey = $("[id$=txtskey]").val();
                var stype = $("[id$=txtstype]").val();
                $.getJSON("MapHander.ashx", { saction: "show", skey: skey, stype: stype }, function (resultData) {

                    cb_LoadData(resultData)
                });
            }
            function CreateMarker() {

                if (i < Terminals.length) {

                    if (Terminals[i] != undefined) {
                        if (true) {
                            //var point = eval('(' + Terminals[i].sPoint + ')');
                            var latlng = new GLatLng(Terminals[i].x, Terminals[i].y);
                            var sName = Terminals[i].Name;

                            var skey = $("[id$=txtskey]").val();
                            var stype = $("[id$=txtstype]").val();
                            $.getJSON("MapHander.ashx", { saction: "GetDetail", skey: skey, stype: stype }, function (obj) {
                                var strhtml = CreateHTML(obj);
                                //                        alert(option_Yellow);
                                SetMapArea(latlng, sName, strhtml, option_Green);

                                //TerminalsHash[Terminals[i].sMAC] = Terminals[i];

                                var trHTML = ("<tr><td><a href='#' onclick=selectMarker('" + Terminals[i].sid + "');>" + Terminals[i].Name + "</a></td><td>" + Terminals[i].Address + "</td></tr>");
                                $('.terminalinfolist .selectform').append(trHTML);
                            });


                        }
                        i++;

                    }
                    window.status = i;
                    setTimeout(CreateMarker, n);
                }
                else {

                    $('#divLoading').hide();
                }

            }


            //设置标记及单击事件
            function SetMapArea(latlng, sName, strhtml, option) {


                var marker = GoogleMapNewMarker(Map, latlng, option);

                //地标drag事件
                GEvent.addListener(marker, "mouseover", function () {
                    GoogleMapShowTipExpand(Map, latlng, sName, strhtml);
                });

            }

            //选择地标
            function selectMarker(sKey) {
                var oTerminal = TerminalsHash[sKey];
                var oPoint = eval('(' + oTerminal.sPoint + ')');
                var point = new GLatLng(oPoint.x, oPoint.y);

                var sName = oTerminal.sMAC;
                var strhtml = CreateHTML(oTerminal);

                if (Map.getZoom() < zoomSize)
                    Map.setZoom(zoomSize);

                Map.panTo(point);

                GoogleMapShowTipExpand(Map, point, sName, strhtml);

            };

            function CreateHTML(obj) {
                var HTML = new Array();


                HTML.push("<table width='100%'>");
                //                HTML.push("<tr>");
                //                HTML.push("<td>名称：</td>");
                //                HTML.push("<td>");
                //                HTML.push();
                //                HTML.push("</td>");
                //                HTML.push("<td>地址：</td>");
                //                HTML.push("<td>");
                //                HTML.push(obj.Address);
                //                HTML.push("</td>");
                //                HTML.push("</tr>");

                HTML.push("<tr>");
                HTML.push("<td>电话：</td>");
                HTML.push("<td colspan='3'>");
                HTML.push(obj.OfficePhone);
                HTML.push("</td>");
                HTML.push("</tr>");

                HTML.push("<tr>");
                HTML.push("<td>手机：</td>");
                HTML.push("<td>");
                HTML.push(obj.MobilePhone);
                HTML.push("</td>");
                HTML.push("<td>联系人：</td>");
                HTML.push("<td>");
                HTML.push(obj.LinkMan);
                HTML.push("</td>");
                HTML.push("</tr>");

                HTML.push("<tr>");
                HTML.push("<td>邮箱：</td>");
                HTML.push("<td>");
                HTML.push(obj.Email);
                HTML.push("</td>");
                HTML.push("<td>地址</td>");
                HTML.push("<td>");
                HTML.push(obj.Address);
                HTML.push("</td>");
                HTML.push("</tr>");
                HTML.push("</table>");
                return HTML.join('');
            }

        });       
        
    </script>

    <script type="text/javascript">
        jQuery().ready(function () {
            //close图标
            jQuery('#img_close').hover(function () {
            
  jQuery(this).attr('src', '../src/images/closeover.jpg');
            }, function () {
                jQuery(this).attr('src', '../src/images/close.jpg');
            });

            jQuery('#img_close').click(function () {
                parent.tb_remove();
            });

            //按钮事件
            jQuery('[id$=btnOK]').click(function () {
                //                jQuery('[id$=txtsLocation]', parent.document).val(jQuery("[id$=txtsLocation]").val());
                //                if (jQuery('[id$=txtsLocation]', parent.document).val() == jQuery("[id$=txtsLocation]").val() && jQuery('[id$=txtsLocation]', parent.document).val() != '') {
                //                    alert("定位图标成功，需要在下一界面中点击保存，才算保存");
                //                }
                //                else
                //                    alert("定位图标失败");

                //                parent.tb_remove();
                var skey = $("[id$=txtskey]").val();
                debugger
                var stype = $("[id$=txtstype]").val();
                $.getJSON("MapHander.ashx", { saction: "new", skey: skey, U: jQuery("[id$=txtsLocation]").val(), stype: stype }, function (resultData) {
                debugger
                    if (resultData.result) {
                        alert("地标已经保存");
                    }
                });
                
                return false;
            });

            jQuery('[id$=btnBack]').click(function () {
                parent.tb_remove();
                return false;
            });
        });
    </script>
</head>
<body>
    <div id="editframe">
       

        <div id="divLoading" style="background-color: red; color: Black; position: fixed;
                            top: 0px; left: 300px; width: 100px;">
                            <img src="../src/images/loading.gif" alt="loading" />加载中……</div>
        <!--ContentBodyUpper end-->
    </div>
    <form runat="server" id="from1">
    <div id="editarea" style="width: 100%; height: 500px;">
        <div id="editcontent" >
            <table cellpadding="0" cellspacing="0" class="editform">
                <tr>
                    <td>
                        <%--地区：&nbsp;&nbsp;
                        <select id="selArea">
                            <option value="bj" selected>北京</option>
                            <option value="sh">上海</option>
                            <option value="gz">广州</option>
                            <option value="cq">重庆</option>
                        </select>&nbsp;&nbsp;--%>
                        <input id='btnAdd' type='button' value='添加地标' class="button_sub" />&nbsp;&nbsp;
                        <input id='btnDel' type='button' value='删除地标' class="button_sub" />&nbsp;&nbsp;
                        <input type="button" class="button_sub" id="btnOK" value="保存" />
                        <%--<asp:Button runat="server" CssClass="button_sub" ID="btnOK" OnClick="btnOK_Click" Text="保存2" />--%>
                        <asp:HiddenField runat="server" ID="txtsLocation" />
                        <asp:HiddenField runat="server" ID="txtskey" />
                        <asp:HiddenField runat="server" ID="txtstype" />
                        <%--<input type="text" id="txtsLocation" value="" style="display: none;" />--%>
                    </td>
                    <th>
                    </th>
                    <td>
                    </td>
                </tr>
            </table>
        </div>
        <div id="maparea">
            <div id="panelMap" style="width: 100%; height: 450px;">
            </div>
        </div>
    </div>
    </form>
</body>
</html>
